<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue事件修饰符</title>
		<style>
			*{margin:10px;}
			.demo{background-color: pink;}
			.box1{
				padding:5px;
				background-color: skyblue;
			}
			.box2{
				padding:5px;
				background-color: aqua;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			.list li{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<!-- 
		Vue中的事件修饰符:
		1.prevent:阻止默认事件(常用)
		2.stop:阻止事件冒泡(常用)
		3.once:事件只触发一次(常用)
		4.capture:使用时间的捕获模式
		5.self:只有event.target是当前操作的元素时才触发操作
		6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕
		-->
		<div id="root">
			<h3>欢迎来到{{name}}</h3>
			<!-- 阻止默认事件 -->
			<a href="http://121.1.2.3" @click.prevent="showInfo1()">点我提示信息</a>
			<!-- 阻止事件冒泡-->
			<div class="demo" @click="showInfo1">
				<button @click.stop="showInfo1">点我弹提示1(不传参)</button>
			</div>
			<!-- 事件只触发一次 -->
			<button @click.once="showInfo2($event,888)">点我弹提示2(传参)</button>
			
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>
			
			<div class="demo" @click.self="showInfo1">
				<button @click="showInfo1">点我弹提示</button>
			</div>
			<!-- passive:事件的默认行为立即执行,无需等待事件回调执行完毕 -->
			<ul class="list" @wheel.passive="showPosition">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<script src="./js/vue.js"></script>
		<script>
			// 阻止vue在启动时生成生成提示
			Vue.config.productionTip = false
			const vm = new Vue({
				el:'#root',
				data:{
					name:'星桥中心小学',
					address:'FFDSFDF'
				},
				methods: {
					showInfo1(event) {
						console.log(event.target);
						//alert('你好呀!');
					},
					showInfo2(event,num) {
						console.log(num);
						alert('你好呀!!');
					},
					showMsg(num) {
						console.log(num);
					},
					showPosition(){
						for(let i = 0;i < 100000;i++) {
							console.log('eee');
						}
						cosnole.log('累死了...');
					}
				},
			});
		</script>
	</body>
</html>